{% extends 'base.html' %}
{% load myfilter %}
{% block css %}
<style>
    .welcome {
        padding: 10px;
        background-color: white;
    }

    .welcome h2 {
        margin-left: 20px;
        display: inline;
        font-weight: 800;
    }

    .welcome img {
        width: 80px;
        height: 80px;
    }

    a{
        text-decoration: none;
    }
    .welcome1 {
        padding: 100px;
        background-image: url("/static/img/welcome2.jpg");
        background-position: 0 -80px;

    }

    .welcome1 .info {
        width: 50%;
        color: white;
    }

    .title {
        font-weight: 600;
    }
    .ooo{
        /*height: 214px;*/
        /*width: 382px;*/
        width: 100%;
        height: 100%;
    }
</style>
{% endblock %}
{% block title %}
<title>黑蛇强在线学习平台</title>
{% endblock %}
{% block body %}
{% include 'header.html' %}
{% csrf_token %}

<div class="row col-md-8 col-md-offset-2">
    <!--欢迎-->
    {% if request.user.is_authenticated %}
    <div class="jumbotron welcome">
        <img src="media/{{ request.user.head }}" alt="..." class="img-circle">
        <h2>{{ request.user.username }}，欢迎回来</h2>
    </div>
    {% endif %}
    <!--页头-->
    <div class="jumbotron welcome1">
        <div class="info">
            <h1>知识打开机遇的大门</h1>
            <p>开始为未来探索新的可能性。购买课程仅需 $11.99 起，优惠明天截止。</p>
        </div>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>


    <!--    下一步要学习什么-->
    <hr>
    <hr>
    <h3 class="title">下一步也要学习什么</h3>
    <div class="row">
        {% for course in courses|slice:":6" %}
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <video  width="100%" height="100%" controls>
                    <source src="/media/{{ course.video }}" type="video/mp4">
                </video>
                <div class="caption">
                    <h3>{{ course.title }}</h3>
                    <p>{{ course.info }}</p>
                    <span>售价：{{ course.price }}</span>&nbsp&nbsp&nbsp
                    <span>作者：{{ course.author }}</span>
                    <!--标签-->
                    <br>
                    {% for t in course.tag.all %}
                    <a style="text-decoration: none" href="{% url 'main:tag_page' t.id%}"><span class="label  mytag ">{{ t.title }}</span></a>
                    {% endfor %}
                    <br>
                    <br>
                    <p>
                         <a class="btn btn-default" href="{% url 'main:course_details' course.id %}" role="button">查看详情</a>
                        {% if request.user.is_authenticated %}
                            {% if course|has_buy_order:request.user  %}
                            <button type="button" class="btn btn-success buy{{ course.id }} buy" data-course-id="{{ course.id }}">移除购物车</button>
                            {% else %}
                            <button type="button" class="btn btn-default buy{{ course.id }} buy" data-course-id="{{ course.id }}">添加到购物车</button>
                            {% endif %}

                            {% if course|has_collection:request.user %}
                            <a class="btn"><img class="collect{{ course.id }}  collect   " data-course-id="{{ course.id }}" src="/static/img/collected.png"></a>
                            {% else %}
                            <a class="btn"><img class="collect{{ course.id }}  collect  "  data-course-id="{{ course.id }}" src="/static/img/collect.png"></a>
                            {% endif %}
                        {% else %}
                         <a  class="btn btn-default" href="{% url 'user:login' %}">添加到购物车</a>
                         <a href="{% url 'user:login' %}" class="btn"><img  src="/static/img/collect.png"></a>

                        {% endif %}

                    </p>
                </div>
            </div>

        </div>
        {% endfor %}
    </div>


    <!--热门 Software Development-->
    <hr>
    <hr>
    <h3 class="title">热门 Software Development</h3>

    <div class="row">

        {% for course in courses_fire %}
        {% if course.fire %}
        <div class="col-md-4">
            <div class="thumbnail">
                <div class=" ooo">
                <video width="100%" height="100%" controls>
                    <source src="/media/{{ course.video }}" type="video/mp4">
                </video>
                </div>
                <div class="caption">
                    <h3>{{ course.title }}</h3>
                    <p>{{ course.info }}</p>
                    <span>售价：{{ course.price }}</span>&nbsp&nbsp&nbsp
                    <span>作者：{{ course.author }}</span>
                    <!--标签-->
                    <br>
                    {% for t in course.tag.all %}
                    <a href="{% url 'main:tag_page' t.id %}"><span class="label  mytag ">{{ t.title }}</span></a>
                    {% endfor %}
                    <br>
                    <br>
                    <p>
                        <a class="btn btn-default" href="{% url 'main:course_details' course.id %}" role="button">查看详情</a>


                        {% if request.user.is_authenticated %}
                             {% if course|has_buy_order:request.user %}
                            <button type="button" class="btn btn-success buy{{ course.id }} buy" data-course-id="{{ course.id }}">移除购物车</button>
                            {% else %}
                            <button type="button" class="btn btn-default buy{{ course.id }} buy" data-course-id="{{ course.id }}">添加到购物车</button>
                            {% endif %}

                            {% if course|has_collection:request.user %}
                            <a class="btn"><img class="collect{{ course.id }}  collect   " data-course-id="{{ course.id }}" src="/static/img/collected.png"></a>
                            {% else %}
                            <a class="btn"><img class="collect{{ course.id }}  collect  "  data-course-id="{{ course.id }}" src="/static/img/collect.png"></a>
                            {% endif %}
                         {% else %}
                         <a  class="btn btn-default" href="{% url 'user:login' %}">添加到购物车</a>
                         <a href="{% url 'user:login' %}" class="btn"><img  src="/static/img/collect.png"></a>
                        {% endif %}

                    </p>
                </div>
            </div>

        </div>
        {% endif %}
        {% endfor %}
    </div>


</div>
{% include 'footer.html' %}

{% endblock %}


{% block js %}
<script>
    $(document).ready(function () {
        let tag_list = ["label-default", "label-success", "label-info", "label-primary", "label-warning", "label-danger"];
        let tags = document.getElementsByClassName("mytag");

        for (let tag of tags) {
            // 生成一个随机索引
            let index = Math.floor(Math.random() * tag_list.length); // 使用 Math.floor 来确保索引是整数
            $(tag).addClass(tag_list[index]); // 将原生 DOM 元素转换为 jQuery 对象
        }
    });
    $(function(){
            $(".collect").click(function () {
                const courseId = $(this).data('course-id');
                console.log(courseId)
                $.ajax({

                    url: "/operation/change_collect/",
                    method: "post",
                    //  制作post  发送的信息
                    data:{
                        "csrfmiddlewaretoken":$('[type="hidden"]').val(),
                        "course_id": courseId
                    },
                    success:function(data){
                        if(data.data.state){
                            console.log("取消收藏")

                            $(`.collect${courseId}`).attr("src", "/static/img/collect.png");


                        }
                        else{
                            console.log("收藏成功")
                            $(`.collect${courseId}`).attr("src", "/static/img/collected.png");

                        }
                    }
                });
            }
            )
        })







    $(function(){
            $(".buy").click(function () {
                const courseId = $(this).data('course-id');
                console.log(courseId)
                $.ajax({

                    url: "/operation/buy_order_change/",
                    method: "post",
                    //  制作post  发送的信息
                    data:{
                        "csrfmiddlewaretoken":$('[type="hidden"]').val(),
                        "course_id": courseId
                    },
                    success:function(data){
                        if(data.data.state){
                            console.log("取消收藏")
                            $(`.buy${courseId}`).removeClass("btn-success");
                            $(`.buy${courseId}`).html("添加到购物车")
                        }
                        else{
                            console.log("收藏成功")
                            $(`.buy${courseId}`).addClass("btn-success");
                            $(`.buy${courseId}`).html("移除购物车");

                        }
                    }
                });
            }
            )
        })

</script>
{% endblock %}